/* Import all components */
@import 'pxtsemantic';
@import 'pxt';
@import 'blockly-toolbox';
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';
@import 'site/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

/*******************************
    Add your custom CSS here
*******************************/

/* Open Sans font */
@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Share Tech Mono'),
         data-uri('../docs/static/fonts/ShareTechMono-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.ui.item.logo .name {
    font-size: 20px;
    font-family: @headerFont;
    font-weight: 400;
    color: white;
    text-transform: uppercase;
    margin-left: 1rem;
}

.simtoolbar .ui.button,
.ui.button.play-button,
.ui.button.restart-button,
.ui.button.debug-button,
.ui.button.collapse-button,
.ui.button.collapsed-button {
    &:extend(.ui.grey.button all);
}

.menubar .ui.menu.fixed .item.editor-menuitem .ui.grid,
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
    border-radius: 0.2rem !important;
}

.projectsdialog .getting-started-segment {
    background-position-y: center;
}

.projectsdialog .ui.card:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#simulators .ui.embed .icon.xicon::after {
    border-radius: 12px;
}

#simulators .ui.embed .icon.xicon::before {
    top: 33%
}

.ui.primary.button.download-button {
    background-color: @orange;
}

.simtoolbar .ui.button.icon, #editortools .ui.button.editortools-btn {
    background-color: @teal;
}

#editortools .ui.button.hw-button {
    background-color: darken(desaturate(@orange, 20%), 10%);
}

#simulator .ui.button.play-button .icon.play {
    color: @white!important;
}


#homemenu .ui.item, #mainmenu .ui.item {
    color: @white;
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
}

/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
}

/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
}

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
}

@media only screen and (max-width: @largestTabletScreen) {
    .simView #boardview {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    #simulators .ui.embed .icon.xicon::before {
        top: 50%
    }
}